<template>
  <div id="app">
    <router-view class="view"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  mounted: function () {
    this.navClickInit();
  },
  methods: {
    navClickInit() {
      // sidebar
      $("body").off("click");
      $("body").on("click", ".nav-parent-title", function () {
        $(this).siblings(".nav-children").slideToggle(500);
        $(this).parent().siblings().find(".nav-children").slideUp(500);
        $(this).parent().addClass("active").siblings().removeClass("active");
        if ($(this).find(".iconRight").hasClass("fa-angle-down")) {
          $(this)
            .find(".iconRight")
            .removeClass("fa-angle-down")
            .addClass("fa-angle-up");
          $(this)
            .parent()
            .siblings()
            .find(".nav-parent-title .iconRight")
            .removeClass("fa-angle-up")
            .addClass("fa-angle-down");
        } else {
          $(this)
            .find(".iconRight")
            .removeClass("fa-angle-up")
            .addClass("fa-angle-down");
        }
      });
    },
  },
};
</script>
